<template>
  <div class="check-in">
    <h1 class="page-title">任务打卡</h1>

    <!-- 今日任务列表 -->
    <el-card class="content-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>今日待完成任务</span>
          <el-tag :type="progressTagType">
            {{ todayTasks.filter(t => t.status === 1).length }} / {{ todayTasks.length }}
          </el-tag>
        </div>
      </template>

      <div v-loading="loading" class="tasks-container">
        <el-empty v-if="todayTasks.length === 0" description="今天还没有安排任务">
          <el-button type="primary" @click="goToTaskAssign">去分配任务</el-button>
        </el-empty>

        <div
          v-for="item in todayTasks"
          :key="item.id"
          class="check-in-item"
          :class="{ 'completed': item.status === 1 }"
        >
          <div class="task-status-indicator">
            <el-icon v-if="item.status === 1" class="status-icon completed">
              <CircleCheckFilled />
            </el-icon>
            <el-icon v-else class="status-icon pending">
              <Clock />
            </el-icon>
          </div>

          <div class="task-content">
            <div class="task-header">
              <h3>{{ item.task?.title }}</h3>
              <div class="task-meta">
                <el-tag size="small" type="info">
                  {{ getDomainText(item.task?.domain) }}
                </el-tag>
                <el-tag size="small" type="warning">
                  {{ getDifficultyText(item.task?.difficulty) }}
                </el-tag>
                <span class="task-time">
                  <el-icon><Clock /></el-icon>
                  {{ item.scheduledTime }}
                </span>
              </div>
            </div>

            <p class="task-description">{{ item.task?.description }}</p>

            <div v-if="item.task?.durationMinutes" class="task-tips">
              <el-icon><InfoFilled /></el-icon>
              建议训练时长：{{ item.task.durationMinutes }}分钟
            </div>
          </div>

          <div class="task-actions">
            <el-tag v-if="item.status === 1" type="success" size="large">
              <el-icon><CircleCheck /></el-icon>
              已完成
            </el-tag>
            <el-button
              v-else
              type="primary"
              size="large"
              @click="openCheckInDialog(item)"
            >
              <el-icon><Edit /></el-icon>
              打卡
            </el-button>
          </div>

          <div 
            v-if="item.status === 1" 
            class="task-photo-display" 
            @mouseenter="handlePhotoHover(item, $event)"
            @mouseleave="handlePhotoLeave"
            @click="handlePhotoClick(item.photoUrl)"
          >
            <el-image
              v-if="item.photoUrl"
              :src="getPhotoUrl(item.photoUrl)"
              fit="cover"
              class="task-photo"
              :preview-src-list="[getPhotoUrl(item.photoUrl)]"
            />
            <div v-else class="task-default-icon">
              <el-icon :size="60" :color="getDomainIconColor(item.task?.domain)">
                <component :is="getDomainIcon(item.task?.domain)" />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 高级悬浮预览层 -->
    <Transition name="preview-fade">
      <div 
        v-if="previewVisible && previewItem?.photoUrl" 
        class="photo-preview-overlay"
        @mouseenter="handlePreviewEnter"
        @mouseleave="handlePreviewLayerLeave"
        @click="closePreview"
      >
        <div class="photo-preview-container" @click.stop>
          <div class="preview-image-wrapper" @click="handlePhotoClick(previewItem.photoUrl)">
            <img 
              :src="getPhotoUrl(previewItem.photoUrl)" 
              alt="预览图片"
              class="preview-image"
            />
          </div>
          <div class="preview-info">
            <div class="preview-info-item">
              <el-icon class="info-icon"><Calendar /></el-icon>
              <span>{{ formatDate(previewItem.scheduledDate) }}</span>
            </div>
            <div class="preview-info-item">
              <el-icon class="info-icon"><Clock /></el-icon>
              <span>{{ previewItem.scheduledTime }}</span>
            </div>
            <div class="preview-info-item">
              <el-icon class="info-icon"><Star /></el-icon>
              <span>{{ previewItem.task?.title }}</span>
            </div>
          </div>
        </div>
      </div>
    </Transition>

    <!-- 打卡对话框 -->
    <el-dialog
      v-model="checkInDialogVisible"
      title="任务打卡"
      width="600px"
      :close-on-click-modal="false"
    >
      <div v-if="currentTask" class="check-in-form">
        <div class="task-summary">
          <h3>{{ currentTask.task?.title }}</h3>
          <p>{{ currentTask.task?.description }}</p>
        </div>

        <el-form
          ref="checkInFormRef"
          :model="checkInForm"
          label-width="100px"
          size="large"
        >
          <el-form-item label="完成评分">
            <el-slider
              v-model="checkInForm.score"
              :min="0"
              :max="100"
              :step="5"
              show-stops
              :marks="scoreMarks"
            />
            <div class="score-display">{{ checkInForm.score }}分</div>
          </el-form-item>

          <el-form-item label="备注说明">
            <el-input
              v-model="checkInForm.remarks"
              type="textarea"
              :rows="4"
              placeholder="记录孩子的表现、进步或需要注意的地方..."
            />
          </el-form-item>

          <el-form-item label="训练照片">
            <el-upload
              ref="uploadRef"
              :auto-upload="false"
              :limit="1"
              :on-change="handleFileChange"
              :on-remove="handleFileRemove"
              :on-exceed="handleExceed"
              accept="image/jpeg,image/png,image/jpg"
              list-type="picture-card"
            >
              <el-icon><Plus /></el-icon>
              <template #tip>
                <div class="upload-tip">
                  支持 jpg/png 格式，最多1张
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <el-button @click="checkInDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          :loading="submitting"
          @click="handleCheckIn"
        >
          确认打卡
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { getDailyTasks } from '@/api/plan'
import { checkIn } from '@/api/progress'
import { DOMAIN_MAP, DIFFICULTY_MAP } from '@/utils/constants'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  User, 
  Sunny, 
  ShoppingBag, 
  ChatLineRound, 
  Reading,
  Calendar,
  Star
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const loading = ref(false)
const submitting = ref(false)
const todayTasks = ref([])
const checkInDialogVisible = ref(false)
const currentTask = ref(null)
const checkInFormRef = ref()
const uploadRef = ref()

// 悬浮预览相关
const previewVisible = ref(false)
const previewItem = ref(null)
let hoverTimer = null
let leaveTimer = null

// 评分标记
const scoreMarks = {
  0: '0',
  25: '25',
  50: '50',
  75: '75',
  100: '100'
}

// 打卡表单
const checkInForm = reactive({
  score: 85,
  remarks: '',
  photoFile: null
})

const progressTagType = computed(() => {
  const completed = todayTasks.value.filter(t => t.status === 1).length
  const total = todayTasks.value.length
  if (total === 0) return 'info'
  if (completed === total) return 'success'
  if (completed >= total / 2) return 'warning'
  return 'info'
})

const getDomainText = (domain) => {
  return DOMAIN_MAP[domain] || domain
}

const getDifficultyText = (difficulty) => {
  return DIFFICULTY_MAP[difficulty] || difficulty
}

// 随机鼓励语库
const encouragementMessages = [
  {
    emoji: '🎉',
    title: '太棒了！',
    messages: [
      '孩子今天的表现真的很好！您的坚持和耐心正在产生成果！',
      '每一次训练都是进步的阶梯，继续加油！',
      '您是最棒的家长！孩子在您的陪伴下一天比一天进步！'
    ]
  },
  {
    emoji: '⭐',
    title: '真棒！',
    messages: [
      '坚持就是胜利！您的付出孩子都看在眼里！',
      '小小的进步累积起来就是大大的成功！',
      '您的爱和耐心正在帮助孩子成长！'
    ]
  },
  {
    emoji: '💪',
    title: '继续加油！',
    messages: [
      '每一天的训练都在为孩子的未来打下基础！',
      '您做得非常好！孩子很幸运有您这样的家长！',
      '训练的路上您不孤单，我们一起努力！'
    ]
  },
  {
    emoji: '🌟',
    title: '干得漂亮！',
    messages: [
      '孩子的每一点进步都离不开您的用心陪伴！',
      '坚持训练，相信未来会越来越好！',
      '您的付出一定会有回报，继续保持！'
    ]
  },
  {
    emoji: '👏',
    title: '表现优秀！',
    messages: [
      '看到孩子的成长，您的辛苦都是值得的！',
      '每一次打卡都是给孩子最好的礼物！',
      '您是孩子最好的老师，加油！'
    ]
  },
  {
    emoji: '🎊',
    title: '完成得很好！',
    messages: [
      '持之以恒，孩子的明天会更美好！',
      '您的坚持正在为孩子创造更多可能！',
      '每一次的努力都在照亮孩子的未来！'
    ]
  },
  {
    emoji: '✨',
    title: '超级棒！',
    messages: [
      '您的陪伴是孩子最大的力量！',
      '一步一个脚印，孩子在稳步前进！',
      '感谢您的坚持，孩子因您而闪耀！'
    ]
  },
  {
    emoji: '🌈',
    title: '太厉害了！',
    messages: [
      '每一次训练都在为孩子的人生增添色彩！',
      '您的爱和耐心是孩子最好的营养！',
      '相信自己，相信孩子，未来可期！'
    ]
  },
  {
    emoji: '🎯',
    title: '完美完成！',
    messages: [
      '目标达成！您和孩子都是最棒的！',
      '又完成了一个小目标，离梦想更近了一步！',
      '每一次打卡都是成功的见证！'
    ]
  },
  {
    emoji: '🏆',
    title: '今日之星！',
    messages: [
      '您和孩子今天都是冠军！',
      '坚持不懈的努力终将迎来收获！',
      '您是孩子心中的超级英雄！'
    ]
  }
]

// 显示随机鼓励弹窗
const showEncouragementDialog = () => {
  const randomIndex = Math.floor(Math.random() * encouragementMessages.length)
  const encouragement = encouragementMessages[randomIndex]
  const messageIndex = Math.floor(Math.random() * encouragement.messages.length)
  
  ElMessageBox.alert(
    `<div style="text-align: center; padding: 10px 20px 20px 20px;">
      <div style="font-size: 80px; margin-bottom: 15px; margin-top: -20px; animation: bounce 1s ease infinite;">${encouragement.emoji}</div>
      <div style="font-size: 20px; font-weight: bold; color: #ffb3d9; margin-bottom: 15px;">${encouragement.title}</div>
      <div style="font-size: 16px; color: #606266; line-height: 1.8;">${encouragement.messages[messageIndex]}</div>
    </div>
    <style>
      @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
      }
    </style>`,
    '打卡成功',
    {
      confirmButtonText: '好的',
      dangerouslyUseHTMLString: true,
      customClass: 'encouragement-dialog',
      confirmButtonClass: 'encouragement-confirm-btn'
    }
  )
}

// 加载今日任务
const loadTodayTasks = async () => {
  loading.value = true
  try {
    const userId = userStore.userInfo?.userId
    if (!userId) return

    const data = await getDailyTasks({ userId })
    todayTasks.value = data || []
  } catch (error) {
    console.error('加载任务失败:', error)
  } finally {
    loading.value = false
  }
}

// 打开打卡对话框
const openCheckInDialog = (task) => {
  currentTask.value = task
  checkInForm.score = 85
  checkInForm.remarks = ''
  checkInForm.photoFile = null
  checkInDialogVisible.value = true
}

// 文件改变
const handleFileChange = (file) => {
  checkInForm.photoFile = file.raw
}

// 移除文件
const handleFileRemove = () => {
  checkInForm.photoFile = null
}

// 超出限制
const handleExceed = () => {
  ElMessage.warning('最多只能上传1张照片')
}

// 执行打卡
const handleCheckIn = async () => {
  if (!currentTask.value) return

  submitting.value = true
  try {
    const userId = userStore.userInfo?.userId
    const formData = new FormData()

    // 根据API文档，使用checkInData字段传递JSON字符串
    const checkInData = {
      userId,
      taskId: currentTask.value.taskId,
      planItemId: currentTask.value.id,
      score: checkInForm.score,
      remarks: checkInForm.remarks
    }
    formData.append('checkInData', JSON.stringify(checkInData))

    // 如果有照片，添加照片文件
    if (checkInForm.photoFile) {
      formData.append('photoFile', checkInForm.photoFile)
    }

    await checkIn(formData)
    
    checkInDialogVisible.value = false
    
    // 显示随机鼓励弹窗
    showEncouragementDialog()
    
    // 重新加载任务列表
    loadTodayTasks()
  } catch (error) {
    console.error('打卡失败:', error)
  } finally {
    submitting.value = false
  }
}

// 导航到任务分配页面
const goToTaskAssign = () => {
  router.push('/app/task-assign')
}

// 获取任务领域对应的图标
const getDomainIcon = (domain) => {
  const iconMap = {
    social: User,
    emotion: Sunny,
    selfcare: ShoppingBag,
    communication: ChatLineRound,
    cognition: Reading
  }
  return iconMap[domain] || Reading
}

// 获取任务领域对应的图标颜色
const getDomainIconColor = (domain) => {
  const colorMap = {
    social: '#409EFF',
    emotion: '#F56C6C',
    selfcare: '#67C23A',
    communication: '#E6A23C',
    cognition: '#909399'
  }
  return colorMap[domain] || '#909399'
}

// 获取照片完整URL
const getPhotoUrl = (photoPath) => {
  if (!photoPath) return ''
  
  // 如果是完整的HTTP/HTTPS URL（OSS返回的URL），直接返回
  if (photoPath.startsWith('http://') || photoPath.startsWith('https://')) {
    return photoPath
  }
  
  // 本地存储：后端照片路径格式：uploads/user_1/20250930/1759207546410.png
  // 在开发环境下，Vite会通过代理转发到后端
  // 在生产环境下，需要配置正确的API地址
  return `/${photoPath}`
}

// 鼠标悬浮显示预览
const handlePhotoHover = (item, event) => {
  if (!item.photoUrl) return
  
  // 清除之前的定时器
  if (hoverTimer) {
    clearTimeout(hoverTimer)
  }
  
  // 延迟300ms显示，避免快速滑过时触发
  hoverTimer = setTimeout(() => {
    previewItem.value = item
    previewVisible.value = true
  }, 300)
}

// 鼠标离开图片缩略图
const handlePhotoLeave = () => {
  // 清除悬浮显示定时器
  if (hoverTimer) {
    clearTimeout(hoverTimer)
    hoverTimer = null
  }
  
  // 清除之前的离开定时器
  if (leaveTimer) {
    clearTimeout(leaveTimer)
  }
  
  // 延迟500ms隐藏，让用户有时间移动到预览层
  leaveTimer = setTimeout(() => {
    previewVisible.value = false
  }, 500)
}

// 鼠标进入预览层
const handlePreviewEnter = () => {
  // 取消关闭预览层的定时器
  if (leaveTimer) {
    clearTimeout(leaveTimer)
    leaveTimer = null
  }
}

// 鼠标离开预览层
const handlePreviewLayerLeave = () => {
  // 立即关闭预览层
  previewVisible.value = false
}

// 关闭预览层
const closePreview = () => {
  previewVisible.value = false
  if (hoverTimer) {
    clearTimeout(hoverTimer)
    hoverTimer = null
  }
  if (leaveTimer) {
    clearTimeout(leaveTimer)
    leaveTimer = null
  }
}

// 点击照片预览大图
const handlePhotoClick = (photoUrl) => {
  if (!photoUrl) return
  // el-image组件会自动处理预览
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${year}年${month}月${day}日`
}

onMounted(() => {
  loadTodayTasks()
  
  // 如果URL中有任务ID，自动打开打卡对话框
  const taskId = route.query.taskId
  const planItemId = route.query.planItemId
  if (taskId && planItemId) {
    setTimeout(() => {
      const task = todayTasks.value.find(t => t.id === Number(planItemId))
      if (task && task.status !== 1) {
        openCheckInDialog(task)
      }
    }, 500)
  }
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.tasks-container {
  min-height: 400px;
}

.check-in-item {
  display: flex;
  align-items: stretch;
  padding: 20px;
  margin-bottom: 20px;
  background: #f9f9f9;
  border-radius: 12px;
  border-left: 5px solid #ffb3d9;
  transition: all 0.3s;
}

.check-in-item:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.check-in-item.completed {
  opacity: 0.85;
  border-left-color: #67c23a;
  background: #f0f9ff;
}

.task-status-indicator {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.status-icon {
  font-size: 48px;
}

.status-icon.completed {
  color: #67c23a;
}

.status-icon.pending {
  color: #ffb3d9;
}

.task-content {
  flex: 1;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.task-header h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #303133;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.task-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #909399;
}

.task-description {
  font-size: 14px;
  color: #606266;
  margin: 0 0 10px 0;
  line-height: 1.6;
}

.task-tips {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: #fef0f0;
  border-radius: 6px;
  font-size: 13px;
  color: #f56c6c;
}

.task-actions {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.task-photo-display {
  margin-left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 120px;
  max-width: 200px;
  height: auto;
  min-height: 120px;
  max-height: 200px;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f5f5;
  border: 2px solid #e0e0e0;
  cursor: pointer;
  transition: all 0.3s;
  flex-shrink: 0;
}

.task-photo-display:hover {
  border-color: #ffb3d9;
  box-shadow: 0 4px 12px rgba(255, 179, 217, 0.3);
  transform: scale(1.05);
}

.task-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 让el-image组件自适应 */
.task-photo-display :deep(.el-image) {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-photo-display :deep(.el-image__inner) {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.task-default-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
  flex-shrink: 0;
}

.task-summary {
  padding: 15px;
  margin-bottom: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  border-left: 4px solid #ffb3d9;
}

.task-summary h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #303133;
}

.task-summary p {
  margin: 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}

.score-display {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #ffb3d9;
  margin-top: 10px;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

:deep(.el-upload-list__item) {
  transition: all 0.3s;
}

@media (max-width: 768px) {
  .check-in-item {
    flex-direction: column;
  }

  .task-status-indicator {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .task-header {
    flex-direction: column;
    gap: 10px;
  }

  .task-actions {
    margin-left: 0;
    margin-top: 15px;
    width: 100%;
  }

  .task-actions .el-button,
  .task-actions .el-tag {
    width: 100%;
  }

  .task-photo-display {
    margin-left: 0;
    margin-top: 15px;
    min-width: 100px;
    max-width: 100%;
    width: fit-content;
    min-height: 100px;
    max-height: 250px;
  }
}

/* 鼓励弹窗自定义样式 */
:deep(.encouragement-dialog) {
  border-radius: 16px;
  overflow: hidden;
}

:deep(.encouragement-dialog .el-message-box__header) {
  background: linear-gradient(135deg, #ffb3d9 0%, #ffc299 100%);
  padding: 20px;
}

:deep(.encouragement-dialog .el-message-box__title) {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

:deep(.encouragement-confirm-btn) {
  background: linear-gradient(135deg, #ffb3d9 0%, #ffc299 100%);
  border: none;
  padding: 12px 40px;
  font-size: 16px;
  border-radius: 20px;
  transition: all 0.3s;
}

:deep(.encouragement-confirm-btn:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 179, 217, 0.4);
}

/* 高级悬浮预览层样式 */
.photo-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  cursor: pointer;
}

.photo-preview-container {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
  cursor: default;
  animation: preview-scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes preview-scale-in {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.preview-image-wrapper {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 4px;
}

.preview-image {
  display: block;
  max-width: 600px;
  max-height: 500px;
  width: auto;
  height: auto;
  border-radius: 12px;
  background: white;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.3s;
}

.preview-image:hover {
  transform: scale(1.02);
}

.preview-info {
  display: flex;
  gap: 20px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 12px;
  flex-wrap: wrap;
}

.preview-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #303133;
  padding: 6px 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.preview-info-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.info-icon {
  color: #ffb3d9;
  font-size: 16px;
}

/* 预览层淡入淡出动画 */
.preview-fade-enter-active,
.preview-fade-leave-active {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.preview-fade-enter-from {
  opacity: 0;
  transform: scale(0.95);
}

.preview-fade-leave-to {
  opacity: 0;
  transform: scale(0.95);
}

/* 响应式适配 */
@media (max-width: 768px) {
  .photo-preview-container {
    padding: 16px;
    gap: 16px;
  }

  .preview-image {
    max-width: 90vw;
    max-height: 60vh;
  }

  .preview-info {
    flex-direction: column;
    gap: 12px;
  }

  .preview-info-item {
    width: 100%;
    justify-content: center;
  }
}
</style>
